<template>
    <teleport to="#message">
        <div class="alert message-info fixed-top w-50 mx-auto justify-content-between mt-2" :class="classObj" v-if="isVisible">
            <span>{{ message }}</span>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close" @click.prevent="hide">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    </teleport>
</template>

<script lang="ts">
import { defineComponent, onUnmounted, PropType, ref } from "vue";
export type MessageType = "success" | "error" | "default";
import useDomCreate from "@/hooks/useDomCreate";
export default defineComponent({
    props: {
        message: String,
        type: {
            type: String as PropType<MessageType>,
            default: "default",
        },
    },
    setup(props, context) {
        useDomCreate("message");
        const isVisible = ref(true);
        const classObj = {
            "alert-success": props.type === "success",
            "alert-danger": props.type === "error",
            "alert-primary": props.type === "default",
        };
        const hide = () => {
            isVisible.value = false;
        };
        return {
            isVisible,
            classObj,
            hide,
        };
    },
});
</script>

<style scoped lang="scss"></style>
